<template>
  <div class="AppMediation">
    <!-- 顶部页面标题栏 -->
    <!-- <div class="header">
      <div class="backIcon" @click="back">
        <img slot="icon" src="../../assets/transfer/backIcon.png" class="iconImage" />
      </div>
      <div class="theme">预约调解</div>
    </div>-->

    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <div class="packingBox">
        <div class="title">预约调解</div>

        <div class="groupBox">
          <van-cell-group>
            <van-field v-model="fieldValues.userName" label="申请人：" placeholder="申请人姓名" required></van-field>
            <van-field v-model="fieldValues.phone" label="联系电话：" placeholder="申请人联系电话" required></van-field>
          </van-cell-group>
        </div>

        <div class="groupBox">
          <van-cell-group>
            <van-field v-model="fieldValues.title" label="矛盾主题：" placeholder="矛盾主题" required></van-field>
            <van-field
              class="messageBox"
              v-model="fieldValues.message"
              rows="1"
              autosize
              type="textarea"
              placeholder="请输入内容描述"
            />
            <div is-link @click="showPopup" class="cellBox">
              <van-field disabled="true" label="预约时间" :placeholder="fieldValues.date"></van-field>
              <img slot="icon" src="../../assets/transfer/backIcon.png" class="timePickIcon" />
            </div>
          </van-cell-group>

          <van-cell-group style="margin-top: 12px;" :border="false">
            <van-field
              v-model="fieldValues.classification"
              required
              clearable
              readonly
              clickable
              right-icon="arrow"
              placeholder="请选择主题分类"
              @click="showPicker = true"
              @click-right-icon="showPicker = true"
            />
          </van-cell-group>
        </div>
      </div>

      <!-- <div class="packingBox">
        <div class="title">调解员信息</div>
        <div class="detials">
          <img :src="detialImage" />
        </div>
      </div> -->
    </div>

    <!-- 底部页面操作栏 -->
    <div class="actionBar">
      <van-button
        type="info"
        class="but"
        @click="submit"
        :disabled="fieldValues.userName === '' || fieldValues.phone==='' || fieldValues.title === '' || fieldValues.classification === ''"
      >提交预约</van-button>
    </div>
    <van-popup v-model="show" round position="bottom" :style="{ height: '48%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :min-date="minDate"
        @confirm="confirmPick"
        @cancel="cancelPick"
      />
    </van-popup>

    <van-action-sheet
      @select="select"
      v-model="showPicker"
      :actions="actions"
      cancel-text="取消"
      @cancel="showPicker = false"
    />
  </div>
</template>
<script>
import bus from "../../plugins/eventBus.js";
export default {
  name: "AppMediation",
  data() {
    return {
      show: false,

      fieldValues: {
        userName: "",
        phone: "",
        title: "",
        message: "",
        classification: "",
        adviseType: "",
        date: ""
      },
      showPicker: false,
      actions: [],

      currentDate: new Date(),
      minDate: new Date(),

      detialImage: "https://img.yzcdn.cn/vant/apple-2.jpg"
    };
  },
  mounted() {
    this.fieldValues.date = this.formatDate(new Date(), "yyyy-MM-dd hh:mm"); // 初始化日期选择值
  },
  created() {
    /**
     * 获取数据字典值
     */
    this.slow.getDictionaryValus("contradictionType").then(ret => {
      console.log("contradictionType", ret);
      ret.forEach(e => {
        e.name = e.text;
      });
      this.actions = ret;
    });
  },
  methods: {
    select(item, index) {
      this.fieldValues.classification = item.name;
      this.fieldValues.adviseType = item.value;
      this.showPicker = false;
      console.log("contradictionType select", this.fieldValues.classification);
    },
    back() {
      this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
      this.$router.back(); // 路由向后退一步
    },

    showPopup() {
      this.show = true;
    },

    // 时间选择器 确定
    confirmPick() {
      this.fieldValues.date = this.formatDate(
        this.currentDate,
        "yyyy-MM-dd hh:mm"
      );
      this.show = false;
    },

    // 时间选择起 取消
    cancelPick() {
      this.show = false;
    },
    // 校验用户是否完成认证
    submit() {
      console.log("校验认证信息");
      if (sessionStorage.getItem("isAuth") === "false") {
        this.$dialog
          .confirm({
            title: "未认证",
            message: "是否前往认证"
          })
          .then(() => {
            this.$router.push({ path: "/register" });
            console.log("to register");
          })
          .catch(() => {});
      } else {
        // 请求接口;
        this.requestPostAppMediation();
      }
    },

    //请求 提交预约接口
    requestPostAppMediation() {
      console.log("appmediation", this.fieldValues);
      this.post("contradictoryController/save", {
        createUserId: this.slow.userInfo.openId, //JSON.stringify(sessionStorage.getItem("userInfo")).openId, // "ohOIg1N1pv4AnrRZ_gFlV1T6nsls"
        createUserName: this.fieldValues.userName,
        phone: this.fieldValues.phone,
        eventType: this.fieldValues.adviseType,
        coordinate: "",
        content: this.fieldValues.message,
        title: this.fieldValues.title,
        attachId: "",
        dataAreaCode: sessionStorage.getItem("dataAreaCode"), //370503102001 // sessionStorage.getItem("dataAreaCode")
        address: "",
        appointmentTime: this.fieldValues.date
      })
        .then(res => {
          this.$toast.success("提交成功");
          setTimeout(() => {
            this.$toast.clear();
            this.$router.back();
          }, 2000);
          // alert(res.success);
        })
        .catch(err => {
          this.$toast.fail("服务器未反应，请稍后重试");
        });
    },

    // 格式化时间戳
    formatDate(date, fmt) {
      date = new Date(Date.parse(date));
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  }
};
</script>
<style lang="scss">
@import "~@/smobile.scss";
.AppMediation {
  .header {
    padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;

    position: absolute;
    width: $sm-img-per-max;
    height: 21px;
    background: $sm-bg-color;
    z-index: 2;

    display: flex;
    flex-direction: row nowrap;
    justify-content: flex-start;
    .backIcon {
      position: absolute;
      white-space: nowrap;
      height: $sm-icon-px-md;
      z-index: 4;

      .iconImage {
        height: $sm-icon-px-md;
        width: $sm-icon-px-md;
        transform: rotateY(180deg);
      }
    }

    .theme {
      position: absolute;
      font-weight: bold;
      width: $sm-img-per-max;
      text-align: center;
      white-space: nowrap;
      z-index: 3;
    }
  }

  .outermostMargin {
    background: $sm-bg-color-grey;
    color: $sm-text-color;
    font-size: $sm-font-size-lg;

    overflow: auto;
    height: 100vh;
    // margin: 41px 0 0 0;

    .packingBox {
      margin: $sm-spacing-col-xl 0 $sm-spacing-col-xl 0;

      .title {
        margin: 0 0 0 $sm-spaceing-block-base;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        font-weight: bold;

        &:before {
          // 利用伪类元素 设置图7_11.png 作为项目符号
          content: "";
          margin-right: $sm-pseudo-width-base;
          width: $sm-pseudo-width-sm;
          height: $sm-pseudo-height-xl;
          background-image: url("../../assets/home/7_11.png");
          border-radius: $sm-border-radius-md;
        }
      }

      .groupBox {
        margin: $sm-spacing-col-xl 0 $sm-spacing-col-xl 0;

        .messageBox {
          min-height: $sm-height-px-base;
        }

        .cellBox {
          display: flex;
          flex-direction: row nowrap;
          align-items: center;

          .timePickIcon {
            height: $sm-icon-px-bp;
          }

          .van-field__control {
            text-align: right;
          }
        }
      }

      .detials {
        margin: $sm-spacing-col-xl 0 0 0;
        padding: $sm-spaceing-block-lg $sm-spaceing-block-lg
          $sm-spaceing-block-lg $sm-spaceing-block-lg;
        background: $sm-bg-color;

        img {
          width: 100%;
        }
      }
    }
  }

  .actionBar {
    margin: 0;
    padding: $sm-spaceing-block-mini;
    height: 40px;

    display: flex;
    flex-direction: row nowrap;
    justify-content: center;
    align-items: center;

    .but {
      height: $sm-img-per-max;
      flex: 1 1 auto;
    }
  }
}
</style>